<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div>
          <!-- 表单 -->
          <form>
            <div>
              <el-row type="flex" class="row-bg" justify="space-between">
                <el-col :span="6.5">
                  <div class="grid-content bg-purple">
                    <label
                      style="
                        font-size: 14px;
                        margin-left: 20px;
                        margin-right: 10px;
                        color: #606266;
                      "
                      >关键字</label
                    >
                    <el-input
                      style="width: 240px"
                      size="small"
                      placeholder="根据编号搜索"
                      v-model="params.keyword"
                    ></el-input>
                  </div>
                </el-col>
                <el-col :span="3.5">
                  <div class="grid-content bg-purple">
                    <el-button size="small" @click="clear"
                      >清除</el-button
                    >
                    <el-button
                      size="small"
                      @click="searchID()"
                      type="primary"
                      >搜索</el-button
                    >
                  </div>
                </el-col>
              </el-row>
            </div>
          </form>
          <!-- 数据数量 -->
          <div
            style="
              margin: 20px 0px;
              height: 35px;
              background-color: #f4f4f5;
              border-radius: 4px;
              color: #909398;
            "
          >
            <i
              style="margin: 0px 10px; line-height: 35px"
              class="el-icon-info"
            ></i>
            <span style="font-size: 13px; line-height: 35px"
              >数据一共 {{ list.counts }} 条</span
            >
          </div>
          <!-- 表格 -->
          <template>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="编号" width="220">
              </el-table-column>
              <el-table-column prop="questionType" label="题型" width="80">
                <template #default="{ row }">
                  <span>{{ getType(row.questionType) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="questionIDs[0].number"
                width="220"
                label="题目编号"
              >
                <template #default="{ row }">
                  <a
                    href="#"
                    style="color: rgb(0, 153, 255)"
                    v-for="item in row.questionIDs"
                    :key="item.number"
                    @click.prevent="review(item.id)"
                    >{{ item.number }}<br
                  /></a>
                </template>
                <!-- 题目预览 -->
                <!-- 弹窗 -->
              </el-table-column>
              <el-table-column prop="addTime" width="180" label="录入时间">
              </el-table-column>
              <el-table-column prop="totalSeconds" label="答题时间(s)">
              </el-table-column>
              <el-table-column prop="accuracyRate" label="正确率(%)">
              </el-table-column>
              <el-table-column prop="userName" label="录入人">
              </el-table-column>
              <el-table-column prop="" label="操作">
                <template v-slot:default="{ row }">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    @click="delquestion(row.id)"
                    circle
                    plain
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <!-- 分页功能 -->
          <template>
            <div style="margin-top: 20px; text-align: right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page"
                :page-sizes="[20, 30, 50, 100]"
                :page-size="params.pagesize"
                layout="prev, pager, next, sizes, jumper"
                :total="list.counts"
                background
              >
              </el-pagination>
            </div>
          </template>
        </div>
      </el-card>
      <!-- 预览组件 -->
      <questions-preview :dialogVisible="dialogVisible" :detail="detail" @close="handleClose"></questions-preview>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import { questionType } from '@/api/hmmm/constants.js'
import QuestionsPreview from '@/module-hmmm/components/questions-preview.vue'

export default {
  components: {
    QuestionsPreview
  },
  data () {
    return {
      list: [],
      tableData: [],
      params: {
        pagesize: 20,
        page: 1,
        keyword: undefined
      },
      questionTypes: questionType,
      // 控制弹窗显示与隐藏字段
      dialogVisible: false,
      // 题目详情
      detail: {}
    }
  },
  methods: {
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      this.getlist()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${this.list.page}`)
      this.params.page = val
      this.getlist()
    },
    // 获取列表数据
    async getlist () {
      const { data } = await randoms(this.params)
      this.list = data
      this.tableData = data.items
    },
    // 预览
    async review (id) {
      const res = await detail({ id })
      this.detail = res.data
      this.dialogVisible = true
    },
    // 删除功能
    delquestion (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调接口
        await removeRandoms({ id })
        // 提示用户
        this.$message.success('删除成功')
        // 刷新列表
        this.getlist()
      })
    },
    // 搜索功能
    searchID () {
      this.getlist()
    },
    // 清除
    clear () {
      // 清空搜索框
      this.params.keyword = undefined
      // 刷新列表
      this.getlist()
    },
    // 数据类型
    getType (val) {
      const newArray = this.questionTypes.filter((item) => {
        return item.value === +val
      })
      return newArray[0].label
    },
    // 子传父 关闭弹窗
    handleClose () {
      this.dialogVisible = false
    }
  },
  created () {
    this.getlist()
  }
}
</script>

<style scoped></style>
